import { useState } from 'react';

import { renderMsgBrief } from '../../utils';
import ReplyList from '../../components/ReplyList';
import './style.scss';

export default function(props) {
  const { quoteReplyInfo, msgContent } = props;
  const [replyListProps, setReplyListProps] = useState({});

  const showTopicList = () => {
    setReplyListProps({
      ...replyListProps,
      visible: true,
      ...props,
      quotedInfo: quoteReplyInfo
    });
  };

  const handleReplyListClose = () => {
    setReplyListProps({
      visible: false,
    });
  }

  return (<div className="replyComponent">
    <div className="resourceMessage">
      <span onClick={showTopicList}>{ renderMsgBrief({msgType: quoteReplyInfo.quoteMessageContentType, msgContent: (quoteReplyInfo.quoteMessageContent || quoteReplyInfo.sourceMessageContent)}) }</span>
    </div>
    <div className="content">
      { msgContent?.text }
    </div>
    { replyListProps.visible && <ReplyList {...replyListProps} onClose={handleReplyListClose} /> }
  </div>)
}